<template>
    <div class='container'>
        <el-dialog
            width='40%'
            style='min-width:1600px'
            @closed='close'
            :show-close='true'
            :title="`${subassembly.sublayerType}文章`"
            :destroy-on-close='true'
            :visible.sync="subassembly.dialogFormVisible"
        >
            <!-- 新增修改表单内容部分 -->
            <el-form label-position="right">
                <el-form-item
                    label="文章标题:"
                    label-width="85px"
                >
                    <el-input
                        v-model="subassembly.articleTitle"
                        width='auto'
                        placeholder="请输入标题"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="文章内容:"
                    label-width="85px"
                >
                    <quill-editor
                        width='100%'
                        v-model="content"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)"
                        @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)"
                    >
                    </quill-editor>
                </el-form-item>
                <el-form-item
                    label="视频地址:"
                    label-width="85px"
                >
                    <el-input
                        v-model="subassembly.videoAddress"
                        width='auto'
                        placeholder="请输入视频链接"
                    ></el-input>
                </el-form-item>
            </el-form>
            <!-- 确定取消部分 -->
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="cancel">取 消</el-button>
                <el-button
                    type="primary"
                    @click="confirm"
                    :disabled='content.trim()&&subassembly.articleTitle.trim()?false:true'
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
    components: {
        quillEditor
    },
    props: {
        subassembly: {
            deep: true,
            type: Object,
            require: true
        },
    },
    data () {
        return {
            content: '',
            editorOption: {
                placeholder: "请在这里输入",
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        ['blockquote', 'code-block'],
                        ['image', 'link']
                    ]
                }
            },
        }
    },
    methods: {
        // 准备编辑器-----------------------quill-editor内置
        onEditorReady (editor) {
        },
        // 失去焦点事件---------------------quill-editor内置
        onEditorBlur (e) {
        },
        // 获得焦点事件---------------------quill-editor内置
        onEditorFocus (e) {
        },
        // 富文本内容改变事件----------------quill-editor内置
        onEditorChange (e) {
            this.$emit('newArticle', this.content)
        },
        //确认按钮向父组件回调
        confirm () {
            this.subassembly.dialogFormVisible = false
            this.$emit('confirm', this.subassembly.row)
            this.content = ''
        },
        //取消按钮向父组件回调
        cancel () {
            this.subassembly.dialogFormVisible = false
            this.$emit('cancel',)
            this.content = ''
        },
        //Dialog关闭所触发回调
        close () {
            this.subassembly.dialogFormVisible = false
            this.$emit('cancel',)
            this.content = ''
        }
    },
    //计算属性
    computed: {
        editor () {
            return this.$refs.myQuillEditor.quill;
        },
    },
    // 侦听器-------------------------------------------------------
    watch: {
        subassembly: {
            deep: true,
            immediate: true,
            handler (newVal, oldVal) {
                this.content = newVal.articleContent
            }
        }
    },
}
</script>

<style scoped lang='less'>
/deep/.ql-toolbar {
    padding: 0px !important;
}
/deep/ .ql-container {
    height: 200px;
    overflow-y: auto;
}
.quill-editor {
    width: 100%;
}
.ql-editor {
    height: 40px;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
    content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode='video']::before {
    content: '请输入视频地址:';
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
    content: '10px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
    content: '18px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
    content: '32px';
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
    content: '标题1';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
    content: '标题2';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
    content: '标题3';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
    content: '标题4';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
    content: '标题5';
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
    content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
    content: '衬线字体';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
    content: '等宽字体';
}
</style>
